<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="leftSidebar">
    <div class="fixed-sidebar">
        <!--左侧bar-->
        <div class="fixed-sidebar-left sidebar--small" id="sidebar-left">
            <a th:href="@{/ProfilePage}" class="logo">
                <div class="img-wrap">
                    <img src="img/logo.png" alt="Olympus">
                </div>
            </a>

            <div class="mCustomScrollbar" data-mcs-theme="dark">
                <ul class="left-menu">
                    <li>
                        <a href="#" class="js-sidebar-open">
                            <svg class="olymp-menu-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="打开菜单">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="index.html">
                            <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="首页">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="收藏页面">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-happy-faces-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="好友列表">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-faces-icon"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-headphones-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="MUSIC&PLAYLISTS">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-headphones-icon"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-weather-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="查看天气">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-weather-icon"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-calendar-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="日历">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-calendar-icon"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-badge-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="社区徽章">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-badge-icon"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-cupcake-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="好友生日">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-cupcake-icon"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-stats-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="账户状态">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-stats-icon"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="管理部件">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="fixed-sidebar-left sidebar--large" id="sidebar-left-1">
            <a th:href="@{/ProfilePage}" class="logo">
                <div class="img-wrap">
                    <img src="img/logo.png" alt="Olympus">
                </div>
                <div class="title-block">
                    <h6 class="logo-title">olympus</h6>
                </div>
            </a>

            <div class="mCustomScrollbar" data-mcs-theme="dark">
                <ul class="left-menu">
                    <li>
                        <a href="#" class="js-sidebar-open">
                            <svg class="olymp-close-icon left-menu-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                            <span class="left-menu-title">折叠菜单</span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html">
                            <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="NEWSFEED">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                            </svg>
                            <span class="left-menu-title">社区首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="FAV PAGE">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                            </svg>
                            <span class="left-menu-title">Fav Pages Feed</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-happy-faces-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="FRIEND GROUPS">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-faces-icon"></use>
                            </svg>
                            <span class="left-menu-title">朋友列表</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-headphones-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="MUSIC&PLAYLISTS">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-headphones-icon"></use>
                            </svg>
                            <span class="left-menu-title">Music & Playlists</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-weather-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="WEATHER APP">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-weather-icon"></use>
                            </svg>
                            <span class="left-menu-title">天气情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-calendar-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="CALENDAR AND EVENTS">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-calendar-icon"></use>
                            </svg>
                            <span class="left-menu-title">Calendar and Events</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-badge-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="Community Badges">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-badge-icon"></use>
                            </svg>
                            <span class="left-menu-title">社区徽章</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-cupcake-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="Friends Birthdays">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-cupcake-icon"></use>
                            </svg>
                            <span class="left-menu-title">好友生日！</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-stats-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="Account Stats">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-stats-icon"></use>
                            </svg>
                            <span class="left-menu-title">账户情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')" >
                            <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="Manage Widgets">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                            </svg>
                            <span class="left-menu-title">Manage Widgets</span>
                        </a>
                    </li>
                </ul>

               <!-- <div class="profile-completion">
                    <div class="skills-item">
                        <div class="skills-item-info">
                            <span class="skills-item-title">Profile Completion</span>
                            <span class="skills-item-count"><span class="count-animate" data-speed="1000"
                                                                  data-refresh-interval="50" data-to="76"
                                                                  data-from="0"></span><span
                                    class="units">76%</span></span>
                        </div>
                        <div class="skills-item-meter">
                            <span class="skills-item-meter-active bg-primary" style="width: 76%"></span>
                        </div>
                    </div>

                    <span>Complete <a href="#">your profile</a> so people can know more about you!</span>

                </div>-->
            </div>
        </div>
    </div>

    <!-- Fixed Sidebar Left -->

    <div class="fixed-sidebar fixed-sidebar-responsive">

        <div class="fixed-sidebar-left sidebar--small" id="sidebar-left-responsive">
            <a href="#" class="logo js-sidebar-open">
                <img src="img/logo.png" alt="Olympus">
            </a>

        </div>

        <div class="fixed-sidebar-left sidebar--large" id="sidebar-left-1-responsive">
            <a href="#" class="logo">
                <div class="img-wrap">
                    <img src="img/logo.png" alt="Olympus">
                </div>
                <div class="title-block">
                    <h6 class="logo-title">olympus</h6>
                </div>
            </a>

            <div class="mCustomScrollbar" data-mcs-theme="dark">

                <div class="control-block">
                    <div class="author-page author vcard inline-items">

                        <div class="author-thumb">
                            <img alt="author" src="img/author-page.jpg" class="avatar">
                            <span class="icon-status online"></span>
                        </div>
                        <a th:href="@{/ProfilePage}" class="author-name fn" th:if="${session.loginUser != null}"
                           href="login.html">
                            <div class="author-title">
                                <span th:text="${session.loginUser.userName}"></span>
                                <svg class="olymp-dropdown-arrow-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-dropdown-arrow-icon">
                                    </use>
                                </svg>
                            </div>
                            <span class="author-subtitle">SPACE COWBOY</span>
                        </a>
                        <a th:href="login.html" class="author-name fn" th:if="${session.loginUser == null}">
                            <div class="author-title">
                                <a href="#" class="btn btn-secondary btn-md-2">登录
                                    <div class="ripple-container"></div>
                                </a>
                                <svg class="olymp-dropdown-arrow-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-dropdown-arrow-icon">
                                    </use>
                                </svg>
                            </div>
                            <span class="author-subtitle">SPACE COWBOY</span>
                        </a>

                    </div>
                </div>

                <div class="ui-block-title ui-block-title-small">
                    <h6 class="title">MAIN SECTIONS</h6>
                </div>

                <ul class="left-menu">
                    <li>
                        <a href="#" class="js-sidebar-open">
                            <svg class="olymp-close-icon left-menu-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                            <span class="left-menu-title">折叠菜单</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="NEWSFEED">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                            </svg>
                            <span class="left-menu-title">社区首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="FAV PAGE">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                            </svg>
                            <span class="left-menu-title">Fav Pages Feed</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-happy-faces-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="FRIEND GROUPS">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-faces-icon"></use>
                            </svg>
                            <span class="left-menu-title">朋友列表</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-headphones-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="MUSIC&PLAYLISTS">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-headphones-icon"></use>
                            </svg>
                            <span class="left-menu-title">Music & Playlists</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-weather-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="WEATHER APP">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-weather-icon"></use>
                            </svg>
                            <span class="left-menu-title">天气情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-calendar-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="CALENDAR AND EVENTS">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-calendar-icon"></use>
                            </svg>
                            <span class="left-menu-title">Calendar and Events</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-badge-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="Community Badges">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-badge-icon"></use>
                            </svg>
                            <span class="left-menu-title">社区徽章</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-cupcake-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="Friends Birthdays">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-cupcake-icon"></use>
                            </svg>
                            <span class="left-menu-title">好友生日！</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="alert('此功能尚在开发！')">
                            <svg class="olymp-stats-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="Account Stats">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-stats-icon"></use>
                            </svg>
                            <span class="left-menu-title">账户信息</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                                 data-placement="right" data-original-title="Manage Widgets">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                            </svg>
                            <span class="left-menu-title">管理部件</span>
                        </a>
                    </li>
                </ul>

                <div class="ui-block-title ui-block-title-small">
                    <h6 class="title">你的账户</h6>
                </div>

                <ul class="account-settings">
                    <li>
                        <a href="#">

                            <svg class="olymp-menu-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                            </svg>

                            <span>Profile 设置</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                                 data-original-title="FAV PAGE">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                            </svg>

                            <span>Create Fav Page</span>
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/logout}">
                            <svg class="olymp-logout-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-logout-icon"></use>
                            </svg>
                            <span>注销</span>
                        </a>
                    </li>
                </ul>

                <div class="ui-block-title ui-block-title-small">
                    <h6 class="title">About Olympus</h6>
                </div>

                <ul class="about-olympus">
                    <li>
                        <a href="#">
                            <span>Terms and Conditions</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>FAQs</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Careers</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>Contact</span>
                        </a>
                    </li>
                </ul>

            </div>
        </div>
    </div>

    <!-- ... end Fixed Sidebar Left -->
</div>
</body>
</html>